<template>
  <div
    ref="refCharts"
    class="chart-box"
    :style="{ height: height, width: width }"
  ></div>
</template>

<script setup>
import { reactive, onMounted, ref, nextTick } from "vue";

import * as echarts from "echarts";
import useEcharts from "@/hooks/useEcharts";

const refCharts = ref(null);

const { chart } = useEcharts();

const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  chartData: {
    type: Object,
    required: true,
  },
});

// 定义变量内容

const state = reactive({});

function setOptions(chartData) {
  if (chart.value) {
    chart.value.setOption({
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "left1",
          type: "pie",
          radius: ["35%", "75%"],
          avoidLabelOverlap: false,

          label: {
            show: true,
            fontSize: 14,
            color: "#fff",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 18,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          data: [
            { value: 1048, name: "xx区1" },
            { value: 735, name: "xx区2" },
            { value: 580, name: "xx区3" },
            { value: 484, name: "xx区4" },
            { value: 300, name: "xx区5" },
          ],
        },
      ],
    });
  }
}
function initChart() {
  chart.value = echarts.init(refCharts.value, "macarons");
  setOptions(props.chartData);
}

watchEffect(() => {
  if (props.chartData) {
    setOptions(props.chartData);
  }
});

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});
</script>

<style lang="scss" scoped></style>
